<template>
  <div class="order-detail-container">
    <el-skeleton :rows="10" animated v-if="loading" />
    <el-card class="box-card" v-else-if="order">
      <template #header>
        <div class="card-header">
          <span>订单详情</span>
          <el-tag :type="statusMap[order.status]?.type || 'info'">{{ statusMap[order.status]?.text }}</el-tag>
        </div>
      </template>
      <div class="section">
        <h4>订单信息</h4>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="订单号">{{ order.orderNumber }}</el-descriptions-item>
          <el-descriptions-item label="订单总价"><span class="price">¥{{ order.finalPrice }}</span></el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ new Date(order.createTime).toLocaleString() }}</el-descriptions-item>

          <el-descriptions-item v-if="order.status === 1" label="支付时间">
            {{ order.payTime ? new Date(order.payTime).toLocaleString() : '处理中' }}
          </el-descriptions-item>

          <el-descriptions-item v-if="order.status === 2" label="拒绝理由">
            <span style="color: #f56c6c;">{{ order.rejectionReason || '未提供具体理由' }}</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="section">
        <h4>收货信息</h4>
        <el-descriptions :column="1" border>
          <el-descriptions-item label="收货人">{{ order.consignee }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ order.phone }}</el-descriptions-item>
          <el-descriptions-item label="收货地址">{{ order.address }}</el-descriptions-item>
          <el-descriptions-item label="备注">{{ order.remark || '无' }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="section">
        <h4>宠物信息</h4>
        <div class="animal-info" v-if="order.animalInfo">
          <el-image :src="order.animalInfo.imageUrl" class="animal-image" fit="cover"/>
          <div class="animal-details">
            <p><strong>名称:</strong> {{ order.animalInfo.name }}</p>
          </div>
        </div>
      </div>
    </el-card>
    <el-empty description="订单不存在或无权访问" v-else />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import { getOrderDetailApi } from '@/api/order.js';

const route = useRoute();
const loading = ref(true);
const order = ref(null);
const statusMap = { 0: { text: '待审核', type: 'warning' }, 1: { text: '已通过', type: 'success' }, 2: { text: '未通过', type: 'info' } };

const fetchOrderDetail = async () => {
  const orderId = route.params.id;
  loading.value = true;
  try {
    const res = await getOrderDetailApi(orderId);
    if (res) {
      order.value = res;
    } else {
      ElMessage.error(res.message || '获取订单详情失败');
    }
  } catch (error) {
    ElMessage.error('网络请求失败');
  } finally {
    loading.value = false;
  }
};
onMounted(fetchOrderDetail);
</script>

<style scoped>
.order-detail-container { max-width: 900px; margin: 20px auto; }
.card-header { display: flex; justify-content: space-between; align-items: center; font-size: 18px; }
.section { margin-bottom: 25px; }
.section h4 { margin-bottom: 15px; font-size: 16px; border-left: 3px solid #409EFF; padding-left: 10px; }
.price { color: #f56c6c; font-weight: bold; }
.animal-info { display: flex; align-items: center; gap: 20px; }
.animal-image { width: 100px; height: 100px; border-radius: 8px; }
</style>
